<template>
  <div>
    <!--导航栏-->
    <navigation-bar @checkKey2="checkKey2"/>
    <!--轮播条-->
    <slideshow/>
    <!--平台推荐-->
    <div>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple-dark">
            <h1>平台推荐......</h1>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col style="width:235px; margin-top:10px;" :span="6" v-for="(n, index) in movielist" :key="n.movieId"
                :offset="index%4==0 ? 2 : 2"><!--0 1 2 3 4 5 6 7....-->
          <el-card :body-style="{ padding: '10px' }">
            <img :src="n.moviePic" class="image" @click="MovieInfo(n.movieId)" style="height: 300px; width: 210px"><!--v-bind:src="和vue对象的属性绑定"-->
            <div style="padding: 5px;">
              <!--<span>{{n.nid}}</span>-->
              <span>{{n.movieName}}</span><br/>
              <!--<span>{{n.nsource}}</span><br/>-->
              <div class="bottom clearfix">
                <!--<span>{{n.nwriter}}</span><br/>-->
                <el-button type="warning" class="button" @click="getMovieInfo(n.movieId)">查看详情</el-button>
                <!--<el-button type="text" class="button" @click="gwc(n.nid)">购票</el-button>-->
              </div>
            </div>
          </el-card>

        </el-col>

      </el-row><el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageable.currentPage"
      :page-sizes="pageable.pageSizes"
      :page-size="pageable.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageable.total">
    </el-pagination>


    </div>
    <!--畅销好课-->
    <div>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple-dark">
            <h1>平台推荐......</h1>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col style="width:235px; margin-top:10px;" :span="6" v-for="(n, index) in movielist" :key="n.movieId"
                :offset="index%4==0 ? 2 : 2"><!--0 1 2 3 4 5 6 7....-->
          <el-card :body-style="{ padding: '10px' }">
            <img :src="n.moviePic" class="image" @click="MovieInfo(n.movieId)" style="height: 300px; width: 210px"><!--v-bind:src="和vue对象的属性绑定"-->
            <div style="padding: 5px;">
              <!--<span>{{n.nid}}</span>-->
              <span>{{n.movieName}}</span><br/>
              <!--<span>{{n.nsource}}</span><br/>-->
              <div class="bottom clearfix">
                <!--<span>{{n.nwriter}}</span><br/>-->
                <el-button type="warning" class="button" @click="getMovieInfo(n.movieId)">查看详情</el-button>
                <!--<el-button type="text" class="button" @click="gwc(n.nid)">购票</el-button>-->
              </div>
            </div>
          </el-card>

        </el-col>

      </el-row><el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageable.currentPage"
      :page-sizes="pageable.pageSizes"
      :page-size="pageable.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageable.total">
    </el-pagination>


    </div>
    <!--图片-->
    <div>
    <el-card class="box-card">
      <div v-for="o in 1" :key="o" class="text item" >
        <!--{{'列表内容 ' + o }}-->
        <img
          src="@/assets/2.png"
          alt="Image"
          v-bind:title="imageTitle"
          @mouseenter="showText"
          @mouseleave="hideText"
        />
      </div>
      <div class="text-overlay" v-if="showOverlay">
        {{ overlayText }}
      </div>
    </el-card>
  </div>
    <!--底部-->
<bottomPage/>

  </div>
</template>

<script>
  import navigationBar from './navigationBar'
  import slideshow from './slideshow'
  import bottomPage from './bottomPage'
    export default {
        name: "home",
      components:{
          //导航条
        navigationBar,
          //轮表条
        slideshow,
      //  底部
        bottomPage

      }
      ,data(){
          return{
            imageTitle:'',
            showOverlay: false,
            overlayText: '',
            keyword:'',
            pageable:{
              currentPage:1,
              pageSizes:[4,8,12],
              pageSize:12,
              total:10
            },
            movielist: [
              {
                "movieId": 1,
                "movieName": "送你一朵小红花",
                "movieTime": "2023-06-12",
                "moviePrice": 35.0,
                "movieDesc": "《送你一朵小红花》是由韩延执导，易烊千玺、刘浩存领衔主演，朱媛媛、高亚麟主演，夏雨特别出演，岳云鹏友情出演的剧情片，于2020年12月31日上映。该片讲述了罹患癌症的男孩韦一航与女孩马小远两个家庭的抗癌故事，思考和直面了每一个普通人都会面临的人生命题。",
                "moviePic": "https://b.bdstatic.com/9a2505837340394d70a84c3b4ac0d580.jpeg@h_1280",
                "movieStatus": 1,
                "movieAddress": "中国大陆",
                "movieMins": "140",
                "movieType": "剧情",
                "movieYear": "2021"
              }
            ]
          }
      },

      methods:{
          //鼠标悬停图片显示文字
        showText() {
          this.showOverlay = true;
          this.imageTitle = '\n' +
            '你做的每一个选择，都是人生的一大步';
        },
        hideText() {
          this.showOverlay = false;
          this.overlayText = '';
        },
        //搜索的关键字
        checkKey2(search){
          this.keyword=search;
        },

        handleSizeChange(val) {
          // console.log(`每页 ${val} 条`);
          this.pageable.pageSize=val;
          this.findAll();
        },
        handleCurrentChange(val) {
          // console.log(`当前页: ${val}`);
          this.pageable.currentPage=val;
          this.findAll();
        },
        findAll() {
          this.$axios.get("/movie/findAll", {
            params: {
              page:this.pageable.currentPage,
              limit:this.pageable.pageSize,
              movieName:this.search,
              movieStatus: 1
            }
          }).then(res => {
            this.movielist = res.data.records;
            this.pageable.total=res.data.total;//res-->ResultMsg(data)
          })
        },
        getMovieInfo(movieId){
          //this.$router.push('/movieInfo')
          this.$router.push({name:'movieInfo',params:{movieId:movieId}})
        },
        MovieInfo(movieId){
          //this.$router.push('/movieInfo')
          this.$router.push({name:'movieInfo',params:{movieId:movieId}})
        },
      },
      mounted() {
        this.findAll();
      },
    }
</script>

<style scoped>
  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    width: 1500px;
  }


  .image-container {
    position: relative;
  }

  .text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px;
    border-radius: 5px;
  }
</style>
